<template>
  <view class="animated fadeIn faster " style="min-height: 100vh;">
    <view class="searchBox px-2 rounded20 d-flex-item d-flex d-flex-middle bg-fff mt-2 mx-2">
      <input v-model="formData.name" class="px-1 rounded10 font30 d-flex-item" placeholder="搜索专业"
             placeholder-class="colorhold"/>
      <text v-if="formData.name" class="text-right iconfont icon-cuo1 main-color mr-1"
            @click="dataCancel"></text>
      <text class="iconfont icon-icon_sousuo main-color font40  text" @click="onSearch"></text>
    </view>

    <!-- 订单列表 -->
    <view class="order-list px-2 pt-2">
      <view
          v-for="(order, index) in orderList"
          :key="index+'2'"
          class="order-item bg-fff rounded10 p-3 mb-2"
      >
        <!-- 订单内容：商品信息 -->
        <view class="order-content d-flex d-flex-middle d-flex-between ">
          <view class="d-flex-item">
            <view class="font28 text-clamp">{{ order.major_name }}</view>
            <!--            <view class="font24 color-gray mt-1">{{ order.start_time }}</view>-->
          </view>
          <view>
            <view style="background: #000;"
                  class="ml-5 mt-2 py-1 rounded30 px-2 colorfff font24  d-flex-item text-center"
                  @click="goUrl(`/subPages/kaitong/kaitong?cate=${encodeURIComponent(JSON.stringify({
                  		category_id:order.category_id,
					category_name:order.major_name,
					vip:'vip'
                  }))}`)">开通会员
            </view>
          </view>

        </view>

      </view>

    </view>
  </view>
</template>

<script>import {fileApi} from "@/http/fileApi";
import {mapState} from "vuex"
export default {
  data() {
    return {
      formData: {
        name: ''
      },
      isActiveList: 1,
      scrollLeft: 0,
      sWidth: 0,
      orderList: [], // 订单列表数据
      loading: false
    }
  },
  onLoad() {
    this.goAllMajors()
  },
  computed: {
    ...mapState(['loginState'])
  },
  methods: {
    async goAllMajors() {
      let params = {
        major_name: this.formData.name
      }
      let res = await fileApi.getAllMajors(params)
      this.orderList = res
    },
    dataCancel() {
      console.log('1111')
      this.formData.name = '';
      setTimeout(() => {
        this.goAllMajors(); // 清空搜索后重新加载订单
      }, 1000)
    },
    onSearch() {
      this.goAllMajors()
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    },
  }
}
</script>

<style scoped>.searchBox {
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
}

.searchBox input {
  height: 100%;
}

.tab-scroll-container {
  width: 100%;
  white-space: nowrap;
  position: relative;
}

.tab-scroll_box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-scroll_item {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  padding: 0 20rpx;
}

.active {
  position: relative;
  font-weight: 600;
  text-decoration: underline
}

.active::after {
  content: "";
  position: absolute;
  width: 50rpx;
  height: 4rpx;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* 订单列表样式 */
.order-image {
  width: 120rpx;
  height: 120rpx;
  background: #e1e1e1;
  flex-shrink: 0;
}

.border-top {
  border-top: 1rpx solid #f0f0f0;
}

.action-btn {
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
}

.pay-btn {
  background: linear-gradient(90deg, #007AFF, #218bfd);
  color: white;
  border: none;
}

.cancel-btn, .refund-btn, .delete-btn {
  border: 1rpx solid #ddd;
  background: white;
  color: #333;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
}

.color-warning {
  color: #ff9900;
}

.color-success {
  color: #00cc66;
}

.color-gray {
  color: #999999;
}

.color-info {
  color: #007AFF;
}
</style>